<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

import { listLeave } from "@/api/front/statistics";
import { listUser } from "@/api/front/statistics";
import { listClock } from "@/api/front/statistics";

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      clock1Total: 0,
      clock2Total: 0,
      leaveTotal: 0,
      userTotal: 0,
      dateRange: [],
      queryLeaveParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userNick: null,
        startTime: null,
        endTime: null,
        leaveType: null,
        leaveReason: null,
        leaveStatus: null,
        returnReason: null
      },
      queryUserParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userNick: null,
        clockTime: null,
        clockStatus: 3
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userNick: null,
        clockTime: null,
        clockStatus: 4
      },
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    fetchData() {
      Promise.all([
        this.getLeaveList(),
        this.getUserList(),
        this.getClock1List(),
        this.getClock2List()
      ]).then(() => {
        this.initChart();
      });
    },
    getClock1List() {
      return listClock(this.queryParams1).then(response => {
        this.clock1Total = response.total;
      });
    },
    getClock2List() {
      return listClock(this.queryParams2).then(response => {
        this.clock2Total = response.total;
      });
    },
    getUserList() {
      return listUser(this.addDateRange(this.queryUserParams, this.dateRange)).then(response => {
        this.userTotal = response.total;
      });
    },
    getLeaveList() {
      return listLeave(this.queryLeaveParams).then(response => {
        this.leaveTotal = response.total;
      });
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['总人数', '请假', '迟到', '早退'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '人数',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [this.userTotal, this.leaveTotal, this.clock1Total, this.clock2Total],
          animationDuration
        }]
      });
    }
  }
}
</script>